<template>
  <div class="header">
    <div class="title" @click="router.push('/')">
      <!--      <img src="../assets/newLogo2.png" alt="" />-->
      <span>管理系统</span>
    </div>

    <el-dropdown>
      <span class="el-dropdown-link">
        <span class="user">
          <span class="icon"><img :src="userIcon" alt="" /></span>
          <span class="txt">{{ userName }}</span>
        </span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="dialogVisible = true">修改密码</el-dropdown-item>
          <el-dropdown-item @click="router.push('/login')">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <!-- 处置车辆 -->
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px">
    <el-form :model="formInline" class="dialogWrap" :rules="rules" ref="ruleFormRef">
      <el-form-item label="原密码" label-width="120px">
        <el-input v-model="formInline.currentPasswd" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="新密码" label-width="120px" prop="newPasswd">
        <el-input type="password" v-model="formInline.newPasswd" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="确认新密码" label-width="120px" prop="confirmPasswd">
        <el-input type="password" v-model="formInline.confirmPasswd" placeholder="请输入" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'

import { ElMessage } from 'element-plus'
import userIcon from '@/assets/icon_user.png'
import axios from '@/utils/axios'

// eslint-disable-next-line no-unused-vars
// const router = useRouter()

export default defineComponent({
  name: 'HeaderPart',
  components: {},
  setup() {
    const router = useRouter()

    const ruleFormRef = ref<FormInstance>()
    const rules = reactive<FormRules>({
      newPasswd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        {
          // eslint-disable-next-line consistent-return
          validator: (rule: any, value: any, callback: any) => {
            if (value !== '') {
              if (value.length < 6) {
                callback(new Error('请输入至少6位的密码'))
                return false
              }
              // if (
              //   !/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@!*#$%&_=])[A-Za-z\d@!*#$%&_=]{8,18}$/.test(
              //     value
              //   )
              // ) {
              //   callback(new Error('密码必须包含字母、数字和特殊字符(@!*#$%&_=)'))
              //   return false
              // }
              callback()
            }
          },
          trigger: 'blur'
        }
      ],
      confirmPasswd: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        {
          // eslint-disable-next-line consistent-return
          validator: (rule: any, value: any, callback: any) => {
            if (value !== '') {
              if (value.length < 6) {
                callback(new Error('请输入至少6位确认密码'))
                return false
              }
              // eslint-disable-next-line no-use-before-define
              if (value !== data.formInline.newPasswd) {
                callback(new Error('两次输入的新密码不一致'))
                return false
              }
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    })

    const data = reactive({
      dialogVisible: false,
      formInline: {
        currentPasswd: '',
        newPasswd: '',
        confirmPasswd: ''
      },
      onConfirm(formEl: FormInstance | undefined) {
        console.log('data.formInline', data.formInline)

        if (!formEl) return
        // eslint-disable-next-line consistent-return
        formEl.validate((valid) => {
          if (valid) {
            console.log('submit!')

            axios
              .post('/user/updatePasswd', {
                currentPasswd: data.formInline.currentPasswd,
                newPasswd: data.formInline.newPasswd
              })
              .then((res: any) => {
                if (res.success) {
                  ElMessage.success(res.resultDes)
                  data.dialogVisible = false
                } else {
                  ElMessage.error(res.resultDes)
                }
              })
          } else {
            console.log('error submit!')
            return false
          }
        })
      }
    })

    const getUser = reactive({
      userName: '',
      initUser() {
        const userInfo = localStorage.getItem('userInfo')
        if (userInfo) {
          getUser.userName = JSON.parse(userInfo).loginName
        }
      }
    })
    getUser.initUser()

    // console.log('localStorage', localStorage.getItem('userInfo'))
    return {
      ruleFormRef,
      rules,
      ...toRefs(data),
      ...toRefs(getUser),
      userIcon,
      router
    }
  }
})
</script>

<style scoped lang="stylus">

.header {
  width 100%
  height 100%
  display flex
  justify-content space-between
  align-items center
  padding-right 20px
  box-sizing border-box
  font-weight bold
  background-color: #2D3E83

  .title{
    //display: block;
    box-sizing border-box
    padding-left: 20px
    //width: 227px
    height:60px
    line-height:60px
    font-size 18px
    cursor pointer
    >*{
      color: #fff
      vertical-align: middle;
    }
    //img{
    //  margin-right: 10px
    //  width: 120px
    //}
  }

  .el-dropdown-link{
    padding 5px 10px
    cursor: pointer;
  }
  .user{
    //float: right;
    color: #fff
    >*{
      vertical-align: middle;
    }
    .icon{
      margin-right: 5px
      display: inline-block;
      width: 30px
      height: 30px
      //border: 1px solid #999
      //border-radius 50%
      //font-size: 0
    }
    img{
      display: block;
      //margin: 5px auto 0
      //margin-right: 5px
      width: 30px
    }
  }

}
  .dialogWrap{
    padding-left:10px
    padding-right:20px
  }
</style>
